<template>
	<div class="body">
		<view class="contact_box">
			<view class="it">
				<view class="contact_label">姓名</view>
				<view class="contact_value">
					<input placeholder-class="placeholder-commit"      v-model.trim="contentFormData.realName"    placeholder="请与身份证姓名保持一致"/>
				</view>
			</view>
			<view class="it">
				<view class="contact_label">手机号码</view>
				<view class="contact_value">
					<input placeholder-class="placeholder-commit"  maxlength="11"   v-model.trim="contentFormData.phone"  placeholder="填写手机号码"/>
				</view>
			</view>
			<view class="it">
				<view class="contact_label">身份证</view>
				<view class="contact_value">
					<input placeholder-class="placeholder-commit"  maxlength="20"    v-model.trim="contentFormData.idCard"  placeholder="填写身份证"/>
				</view>
			</view>
			<view class="it around">
				<view class="contact_label">设置为本人</view>
				<view class="contact_value">
					<check-box @change="changeSelf" :isCheck="contentFormData.selfFlag"></check-box>
				</view>
			</view>
			 
			
		</view>
		
		
		<bottom-action>
			<view class="btns">
				<view class="btn-blue btn-red btn-del" v-if="contentFormData.id" @tap="removeContact()">删除</view>
				<view class="btn-blue " @tap="apiAddContact">确定</view>
			</view>
		</bottom-action>
		
	</div>
</template>

<script>
	const api = require("@/api/api").api;
	export default{
		data(){
			return {
				contentFormData:{
					"id": 0,
					"idCard": "",
					"phone": "",
					"realName": "",
					"selfFlag": false
				},
			}
		},
		onLoad(opt) {
			if(opt.obj)this.contentFormData=JSON.parse(decodeURIComponent(opt.obj))
		},
		methods:{
			changeSelf(v){
				this.contentFormData.selfFlag=v;
				
			},
			
			removeContact(){
				uni.showModal({
					content:"确定删除“"+this.contentFormData.realName+"”？",
					success: (res) => {
						if(res.confirm){
							api.user.delContacts(this.contentFormData.id).then(res=>{
								console.log(res.data);
								if(res.code==200){
									
								 	uni.navigateBack({
								 		delta:1
								 	})
									 
								}
								
							});
						}
					}
				})
				
			},
			apiAddContact(){
				
				
				console.log(this.contentFormData);
				
				let params = Object.assign({}, this.contentFormData);
				let formRules = [{
					name: 'realName',
					required: true,
					type: 'required',
					errmsg: '请输入姓名'
				}, {
					name: 'phone',
					required: true,
					type: 'required',
					errmsg: '请输入手机号码'
				},, {
					name: 'idCard',
					required: true,
					type: 'required',
					errmsg: '请输入身份证号码'
				}]
				let valRes = this.$validate.validate(params, formRules)
				if (!valRes.isOk) {
					uni.showToast({
						icon: 'none',
						title: valRes.errmsg
					})
					return false
				}
				
				
				
				if(!this.contentFormData.id){
					api.user.addContacts(this.contentFormData).then(res=>{
						console.log(res.data);
						if(res.code==200){
							
						 	uni.navigateBack({
						 		delta:1
						 	})
							 
						}
						
					});
				}else{
					api.user.editContacts(this.contentFormData).then(res=>{
						console.log(res.data);
						if(res.code==200){
							uni.navigateBack({
								delta:1
							})
						
							
						}
						
					});
				}
				
				
			},
			
		}
		
	}
</script>

<style scoped lang="scss">
	.body{ height:100vh; background: #fff;width:100%}
	
	.contact_box{ padding:40upx;
	 
	 
		::deep.placeholder-commit{  color:#ccc !important; font-size:24upx !important;}
		
		.contact_value{ 
			
			.nopdiding{padding:0 0 !important;}
			
			display: flex; align-items: center; flex-flow: column; justify-content:space-around ;
			textarea{ width: 355upx; padding:10rpx 0; height: 50upx; line-height: 50upx; font-size:28upx }
			
		}
		
		.it{
			font-size: 30rpx;
			color: #303741;
			display: flex;
			line-height: 80upx;
			border-bottom: solid 1upx $item-bottom-border-color;
			.contact_label{
				width: 152upx;
				margin-right: 40upx;
			}
			.contact_value{
				font-size: 28upx;
			}
		}
		.it input{ height: 80upx; width: 400upx;}
		.it.around{ justify-content: space-between;}
		 
		
		
	}
	
	 
		 
		.btns{
			box-sizing: content-box;
			height: 108upx;
			width: 100%;  display: flex;justify-content: space-between;
			align-items: center;
		    .btn-blue.btn-del{ flex:1}
		    .btn-blue{ flex:3; margin:0 20upx}
		}
		 
	 
</style>
